<template>
    <div class="main">
        <div class="main-header">
			<el-button size="mini" v-for="(item, index) in buttons" :key="index" :type="item.path | formatType"
				:icon="item.icon" :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{
					item.title }}</el-button>
           <!-- <el-button v-if="$auth('add')"  type="primary" size="small" @click="tapButton('add')">添加</el-button>
            <el-button v-if="$auth('edit')" :disabled="'edit' | formatDisabled(selection)" type="primary" size="small" @click="tapButton('edit')">编辑</el-button>
            <el-button v-if="$auth('delete')" :disabled="'delete' | formatDisabled(selection)" type="danger" size="small" @click="tapButton('delete')">删除</el-button> -->
        </div>
        <el-table ref="table" class="main-table" :data="couponData" height="100%" border
            header-cell-class-name="main-table-header" @selection-change="onSelectionChange" @row-click="onRowClick">
            <el-table-column type="selection" width="39"> </el-table-column>
            <el-table-column show-overflow-tooltip label="优惠券名称" prop="coupon_name" align="center"></el-table-column>
            <el-table-column label="类型" prop="coupon_type" align="center" width="80px">
                <template slot-scope="{ row }">
                    {{ row.coupon_type | formatCouponType }}
                </template>
            </el-table-column>
			<el-table-column label="金额" prop="coupon_money" align="center">
				<!-- row.coupon_type==2 折扣劵 discount_percent 折扣券折扣-->
				<template slot-scope="{ row }">
				    
					<div v-if="row.coupon_type==2">{{row.discount_percent/10}}折</div>
					<div v-else>{{ row.coupon_money}}</div>
				</template>
			</el-table-column>
            <!-- <el-table-column label="金额" prop="coupon_money" align="center"></el-table-column> -->
            <el-table-column label="消费门槛" prop="usable_money" align="center" width="120px"></el-table-column>
            <el-table-column label="发放数量" prop="coupon_num" align="center" width="120px"></el-table-column>
            <el-table-column label="领取开始时间" prop="start_time" align="center" width="150px">
                <template slot-scope="{ row }">
                    {{ row.start_time | formatDate }}
                </template>
            </el-table-column>
            <el-table-column label="领取结束时间" prop="end_time" align="center" width="150px">
                <template slot-scope="{ row }">
                    {{ row.end_time | formatDate }}
                </template>
            </el-table-column>
			<el-table-column align="center" label="状态" prop="status" width="80px">
				<!-- 状态status  0下架 1正常 -->
				<template slot-scope="{ row }">
				<el-tag v-if="row.status==0">下架</el-tag>
				<el-tag  v-if="row.status==1" type="success">正常</el-tag>
					<!-- <el-switch v-model="row.status" active-value="10" inactive-value="20"></el-switch> -->
				</template>
			</el-table-column>
            <el-table-column label="过期方式" prop="expire_type" align="center">
                <template slot-scope="{ row }">
                    {{ row.expire_type | formatExpireType }}
                </template>
            </el-table-column>
            <el-table-column label="剩余数量" prop="shenyu_num" align="center" width="120px"></el-table-column>
            <el-table-column label="创建时间" prop="createtime" align="center" width="150px">
                <template slot-scope="{ row }">
                    {{ row.createtime | formatDate }}
                </template>
            </el-table-column>
			<el-table-column label="操作" prop="expire_type" align="center" width="220px">
			    <template slot-scope="{ row }">
			       <el-button type="primary" size="small" @click="openlist(row)">领取记录</el-button>
				    <el-button type="primary" size="small" @click="opensent(row)">发放优惠券</el-button>
			    </template>
			</el-table-column>
        </el-table>
        <el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
            @current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
        <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="60%" @close="onDialogClose" :destroy-on-close="true">
            <component :show="dialogVisible" @sentcoupon="sentcoupon" :is="dialogView" @update="getCouponData" :selection="selection" :formData="formData"></component>
        </el-dialog>
    </div>
</template>

<script>
import { get, del,post } from "@/assets/js/http.js";
import Add from "./add.vue";
import Edit from './edit.vue'
import List from "./list.vue";
import Sent from "./sentcoupon.vue";
export default {
    components: {
        Add,Edit,List,Sent
    },
    name: "view-admin",
    data() {
        return {
            couponData: [],
            selection: [],
            page: 1,
            limit: 20,
            total: 0,
            dialogVisible: false,
            dialogTitle: "",
            dialogView: "",
			formData:[],
			rowid:'',
        };
    },
    filters: {
        formatCouponType(type) {
            if (type == 1) {
                return "满减券";
            }
            if (type == 2) {
                return "折扣券";
            }
			if (type == 3) {
			                return "现金劵";
			            }
        },
        formatExpireType(type) {
            if (type == 1) {
                return "固定时间区间";
            }
            if (type == 2) {
                return "领取后多少天内过期";
            }
        }
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    
    mounted() {
        this.getCouponData();
    },
    methods: {
        async getCouponData() {
            const data = await get({
                url: "/admin/shop.coupon/index",
                loading: true,
                params: {
                    limit: this.limit,
                    page: this.page
                }
            });
            this.couponData = data.list;
            this.total = data.total;
        },
        onCurrentChange(index) {
            this.page = index;
            this.getCouponData();
        },
        onAdd() {
            this.dialogTitle = "新增优惠券";
            this.dialogView = "Add";
			
            this.dialogVisible = true;
        },
        onEdit() {
            this.dialogTitle = "编辑优惠券";
            this.dialogView = "Edit";
            this.dialogVisible = true;
			console.log(this.selection,'this.selection')
        },
		openlist(row){
			this.dialogTitle = "领取记录";
			this.dialogView = "List";
			this.dialogVisible = true;
			this.formData = row.id
		},
		//发放优惠卷
		opensent(row){
			this.dialogTitle = "发放优惠卷";
			this.dialogView = "Sent";
			this.dialogVisible = true;
			this.rowid = row.id
		},
        onDelete() {
			console.log(123)
            this.$confirm(
                `此操作将永久删除该${this.selection.length}个优惠券, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
                .then(async () => {
                    let query = "?";
                    for (let i = 0; i < this.selection.length; i++) {
                        const item = this.selection[i];
                        if (i > 0) {
                            query += "&ids[]=" + item.id;
                        } else {
                            query += "ids[]=" + item.id;
                        }
                    }
                    await del({
                        url: "/admin/shop.coupon/del" + query,
                        successTip: true,
                        loading: true
                    });
                    this.getCouponData();
                })
                .catch(() => {
                    this.$refs.table.clearSelection();
                });
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        onDialogClose() {
			this.getCouponData();
            this.$refs.table.clearSelection();
        },
        tapButton(item) {
			console.log(item)
            if (item.path === "add") {
                this.onAdd();
            } else if (item.path === "edit") {
                this.onEdit();
            } else if (item.path === "delete") {
                this.onDelete();
            }
        },
		//发放优惠卷
		sentcoupon(result){
			const infos = JSON.parse(JSON.stringify(result));
			const user_ids = []
			infos.forEach(item=>{
				user_ids.push(item.id)
			})
			console.log(user_ids,'result',infos)
			post({
				url:'/admin/shop.coupon/sendCoupon',
				data:{
					user_ids:user_ids,
					coupon_id:this.rowid
				}
			}).then(res=>{
				this.rowid =''
				this.getCouponData()
			})
		}
    }
};
</script>
